<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>职业学院首页</title>
        <style>
            /* 公告样式 */
            body,div,span,h1,h2,h3,h4,h5,h6,p,a,dl,dt,dd,ol,ul,li,footer,header,section,nav{
                margin:0px;
                padding:0px;
                border:none;
                font-size:14px;
                font-family:"微软雅黑","宋体",Arial;
                color:#7c7c7c;
            }
            a{
                text-decoration:none;;
            }
            ul,ol{
                list-style:none;
            }

            /* 页面头部header样式 */
            #header{
                height:80px;
                background-color:#4685c6;
                background-image:linear-gradient(to bottom,#4685c6,#06b8fa);
            }
            #header .container{
                width:1200px;
                margin:0px auto;
                /* height:80px; */
                /* background-color: pink;临时背景颜色 */
            }
            #header .container>a{
                display:block;
                float:left;
                margin:15px 25px;
            }
            #header .container nav{
                float:right;
            }
            #header .container nav ul{
                list-style:none;
            }
            #header .container nav ul li{
                float:left;
                width:110px;
                height:73px;
                text-align:center;
            }
            #header .container nav a{
                color:#fff;
                font-size:16px;
                line-height:73px;
            }
            #header .container nav ul li:nth-child(1){background-color:#433b90;}
            #header .container nav ul li:nth-child(2){background-color:#017fcb;}
            #header .container nav ul li:nth-child(3){background-color:#78b917;}
            #header .container nav ul li:nth-child(4){background-color:#feb800;}
            #header .container nav ul li:nth-child(5){background-color:#f27c01;}
            #header .container nav ul li:nth-child(6){background-color:#d40112;}
            #header .container nav ul li a:hover{color:black}
            #233:hover{background-color: red;}

            /* 广告位banner颜色 */
            #banner{
                position:relative;
                background-color: #eaeaea;
            }
            #banner ul{
                position:relative;
                width:1200px;
                height:400px;
                margin:0px auto;
                /* background-color: green; */
                padding-top:10px;
            }
            #banner ul li{
                position:absolute;
                width:610px;
                height:300px;
                overflow:hidden;
            }
            #banner .active{
                z-index:2;
                top:15px;
                right:0;
                left:0;
                width:760px;
                height:360px;
                margin:auto;
                border:1px solid #fff;
                box-shadow:0 30px 140px 22px rgba(0,0,0,.35)
            }
            #banner .left{
                z-index:1;top:0; bottom:0;left:0;margin:auto;
                box-shadow:0 3px 7px 0 rgba(0,0,0,.35);
            }
            #banner .right{
                z-index:1;top:0;right:0;bottom:0;margin:auto;
                box-shadow:0 3px 7px 0 rgba(0,0,0,.35)
            }
            #banner ul li img{
                position:absolute;
                left:-30%;
                height:100%;
            }
            
            /* 主体内容区样式 */
            #main{
                position:relative;
                width:1200px;
                height:473px;
                margin:35px auto 0;
                /* background-color: bisque; 临时背景颜色 */
            }
            #main h1{
                font-size:30px;font-family:"微软雅黑";font-weight:bold;margin-bottom:23px;color:black;
                border-bottom:3px solid #ccc;
            }
            #main h1 samp{
                font-size:20px;font-family:"微软雅黑";color:black;
            }
            #main aside dl{
                position:relative;
                display:block;
                height:74px;
                margin-bottom:17px;
            }
            #main aside dl dt{
                position:absolute;
                top:-1px;
                left:92px;
                font-size:16px;
                font-weight:bold;
                line-height:16px;
                text-decoration:underline;
                color:black;
            }
            #main aside dl dd:first-of-type{
                position:absolute;
                left:0;
            }
            #main aside dl dd:last-of-type{
                position:absolute;
                top:20px;
                left:90px;
                line-height:150%;
            }
            #main article{
                float:right;
                width:720px;
                overflow:hidden;
            }
            #main article p{
                margin-bottom:15px;
                line-height:150%;
                text-indent:2em;
            }
            #main article img{
                margin-bottom:15px;
                border:1px solid #ccc
            }
            #main .midright{
                width:720px;
                height:473px;
                float:right;
                /* background-color:#066; 临时背景颜色 */
            }
            #main .midleft{
                width:450px;
                height:473px;
                float:left;
                /* background-color:#fc0; 临时背景颜色 */
            }
            /* 页脚footer样式 */
            #footer{
                background-color:#4685c6;
            }
            #footer{
                position:relative;
                background:#4685c6;
            }
            #footer:before{
                position:absolute;
                z-index:-1;
                top:-6px;
                left:0;
                width:100%;
                height:6px;
                content:""; 
                background:#d6d6d6;
            }
            #footer .container{
                position:relative;
                width:1200px;
                height:64px;
                margin:0 auto;
                /* background-colo666r:#; */
            }
            #footer .container p{
                line-height:64px;
                float:left;
                color:#fff;
            }
            #footer .container span{
                float:right;
                margin:14px 40px;
            }
            #footer container span img{
                margin-left:4px;
                opacity:.7;
            }
            #footer .container span img:hover{
                opacity:1;
                cursor:pointer;
            }
        </style>
    </head>
    <body>
        <!-- header页面头部 -->
         <header id ="header">
            <div class="container">
                <a href="https://www.bgypt.edu.cn/"><img src="./images/logo.png" ></a>
                <nav>
                    <ul>
                        <li class="active"><a href="https://www.bgypt.edu.cn/">门户首页</a></li>
                        <li><a href="https://www.bgypt.edu.cn/gaikuang/jianjie/">学校概况</a></li>
                        <li><a href="https://www.bgypt.edu.cn/zuzhijigou/jiagou/">组织结构</a></li>
                        <li><a href="https://zs.bgypt.edu.cn/">招生就业</a></li>
                        <li><a href="https://www.bgypt.edu.cn/bidding/zhaotoubiao/">科学研究</a></li>
                        <li><a href="https://www.bgypt.edu.cn/xingz/renshi/zp/">招聘信息</a></li>
                    </ul>
                </nav>
            </div>
         </header>
         <!-- banner广告栏 -->
          <section id="banner">
            <ul>
                <li class="active"><img src="./images/banner/1.jpg"></li>
                <li class="left"><img src="./images/banner/2.jpg"></li>
                <li class="right"><img src="./images/banner/3.jpg"></li>
            </ul>
          </section>
          <!-- 主体内容区 -->
          <section id="main">
            <!-- 左侧公告通知 -->
            <aside class="midleft">
                <h1>公告通知<span>招标信息</span></h1>
                <dl>
                    <dt>教育装备产业集群信息服务平台招标公告</dt>
                    <dd><img src="images/Course/02_09.png"></dd>
                    <dd>计算机学院对教育装备产业集群信息服务平台项目进行公开招标，欢迎符合条
                        件的投标.项目名称及编号：教育装备产业集群信息服务平台（ITZ2017-131）</dd>
                </dl>
                <dl>
                    <dt>教育装备产业集群信息服务平台招标公告</dt>
                    <dd><img src="./images/Course/05_05.png"></dd>
                    <dd>>计算机学院对教育装备产业集群信息服务平台项目进行公开招标，欢迎符合条
                        件的投标.项目名称及编号: 教育装备产业集群信息服务平台（ITZ2017-131）</dd>
                </dl>
                <dl>
                    <dt>教育装备产业集群信息服务平台招标公告</dt>
                    <dd><img src="./images/Course/06_04.png"></dd>
                    <dd>计算机学院对教育装备产业集群信息服务平台项目进行公开招标，欢迎符合条
                        件的投标.项目名称及编号: 教育装备产业集群信息服务平台（ITZ2017-131）</dd>
                </dl>
                <dl>
                    <dt>教育装备产业集群信息服务平台招标公告</dt>
                    <dd><img src="images/Course/09_07.png"></dd>
                    <dd>计算机学院对教育装备产业集群信息服务平台项目进行公开招标，欢迎符合条
                        件的投标.项目名称及编号: 教育装备产业集群信息服务平台（ITZ2017-131）</dd></dd>
                </dl>
            </aside>
            <!-- 右侧学院介绍 -->
            <article class="midright">
                <h1>学院介绍<span>你理想的大学校园</span></h1>
                <p>校占地1000亩，坐落在风景秀美、充满人文底蕴和现代气息，集教学、科研、
                    培训、职业技能鉴定和社会服务于一体的高教园区，校园规划科学，设计精致，环境优雅，景致宜人、交通便捷。</p>
                    <img src="images/article.jpg">
                    <p>学校师资结构合理，素质优良。现有教职工600余人，其中专任教师400多名，
                        专任教师中高级职称教师占30%、具有硕士以上学位64%；专业课教师中具有“双师”素质的教师占86%...</p>    
            </article>
        </section>
           <!-- 底部页脚 -->
            <footer id="footer">
                <div class="container">
                    <p>Copyright&copy;2017 All Rights Reseved.</p>
                    <span>
                        <a href="https://weixin.qq.com/">
                        <img src="./images/icon/weichat.png">
                        </a>
                        <a href="https://weibo.com/newlogin?tabtype=weibo&gid=102803&openLoginLayer=0&url=">
                        <img src="./images/icon/sina.png">
                        </a>
                        <a href="https://im.qq.com/index/">
                        <img src="./images/icon/qq.png">
                        </a>
                    </span>
                </div>
            </footer>
    </body>
</html>